<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入bootstrap的css -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css">
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap-theme.css">
<!-- 引入jquery的js -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap3/js/bootstrap.js"></script>

<!-- 引入boostrap的表格的css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-table/bootstrap-table.css">
<script type="text/javascript" src="../js/bootstrap/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<!-- 引入bootbox弹框的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap-bootbox/bootbox.js"></script>
<!-- 引入bootstrap的日期的css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
<script type="text/javascript" src="../js/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<!-- 引入fileinput 文件上传的 css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-fileinput/css/fileinput.css">
<script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/locales/zh.js"></script>
<body>
<div id="toolbar">
    <form class="form-inline">
        <div  class="form-group">
            <label>联系电话:</label>
            <input class="form-control" id="phone" placeholder="联系电话">
        </div>
        <div  class="form-group">
            <label>时间:</label>
            <input type="text" class="form-control date" name="goods.createTime"  id="startDate" >
            ---
            <input type="text" class="form-control date" name="goods.createTime" id="endDate" >
        </div>
        <button onclick="search()" class="btn btn-primary glyphicon glyphicon-search" type="button">搜索</button>
    </form>
</div>
    <table class="table" id="myTable2"></table>
</body>
<script>
    $(function(){
        findOrderBy();
        dateTc(); // 时间 框
    })
    //条查时间
    function dateTc(){
        $('.date').datetimepicker({
            language: 'zh-CN',//显示中文
            format: 'yyyy-mm-dd',//显示格式
            minView: "month",//设置只显示到月份
            initialDate: new Date(),//初始化当前日期
            autoclose: true,//选中自动关闭
            todayBtn: true,//显示今日按钮
        })
    }
    function findOrderBy() {
        $('#myTable2').bootstrapTable({
            toolbar:'#toolbar',//工具栏
            url:'../lzyMovie/findOrderBy',//获取数据地址
            pagination:true, //是否展示分页
            pageList:[2, 4, 6, 50,100],//分页组件
            pageNumber:1,//默认页码
            pageSize:100,//默认每页条数
            sidePagination:'client',//分页方式：client客户端分页，server服务端分页（*
            striped:true,//斑马线
            queryParams:function(){
                var phone=$("#phone").val();
                var startDate =$("#startDate").val();
                var endDate =$("#endDate").val();
                return {
                    phone:phone,
                    startDate:startDate,
                    endDate:endDate
                };
            },
            columns:[
                {field:"checkbox",checkbox:true},
                {field:"orderId",title:"订单编号"},
                {field:"phone",title:"联系手机号"},
                {field:"movieName",title:"电影名称"},
                {field:"cinemaName",title:"影院名称"},
                {field:"hallName",title:"影厅名称"},
                {field:"orderPrice",title:"支付金额"},
                {field:"date",title:"订单日期"}
            ]
        });
    }
    // 条查
    function search() {
        $('#myTable2').bootstrapTable("refresh");
    }
</script>
</html>